<template>
	<view class="page">
		<!-- 导航区域 -->
		<u-navbar title="物流详情" :autoBack="true" leftText="返回" bgColor="rgba(255,255,255,0)"></u-navbar>

		<div class="main">
			<div style="background-color: #f5f5f5;height: 20rpx;width: 100%;"></div>
			<div style="padding-top: 28rpx;padding-bottom: 28rpx;display: flex;align-items: center;">
				<img src="../../../static/icon/icon_wuliu_car.png" alt="" style="margin-left: 52rpx;
				width: 94rpx;height: 96rpx;" />
				<div style="margin-left: 40rpx;">
					<div>
						<span class="info-title">承运公司：</span>
						<span class="info-value" id="kuaidi_name">中通快递</span>
					</div>
					<div style="margin-top: 12rpx;">
						<span class="info-title">快递单号：</span>
						<span class="info-value" id="kuaidi_no">45123456423232</span>
					</div>
				</div>
			</div>
			<div style="background-color: #f5f5f5;height: 20rpx;width: 100%;"></div>

			<div>
				<p style="color: #000000;font-size: 24rpx;padding-top: 30rpx;padding-bottom: 30rpx;
				padding-left: 40rpx;">订单跟踪</p>
			</div>
			<div class="dividing-line"></div>

			<!-- colors: 设置主题色 stepData:步骤数据 -->
			<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colors: "#CFAE7D",
				//模拟后台返回的数据
				stepData: [{
						name: '提交申请',
						time: '2023-06-09 20:01:49',
						isNow: 1,
						type: 1,
						desc: '不想要了'
					},
					{
						name: '等待审核',
						time: '2023-06-09 20:01:49',
						isNow: 0,
						type: 1,
						desc: '您的服务单已申请成功，待售后审核中'
					},
					{
						name: '审核意见',
						time: '2023-06-09 20:13:49',
						isNow: 0,
						type: 1,
						desc: '您的售后单已收到，会在24小时与您联系。'
					},
					{
						name: '审核上门取件',
						time: '2023-06-09 20:13:49',
						isNow: 0,
						type: 1,
						desc: '您的服务单已预约时间2023-06-10(周日) 15:00-20:00'
					},
					{
						name: '取件成功',
						time: '2023-06-10 18:54:55',
						isNow: 0,
						type: 1,
						desc: '您的商品已取件成功'
					},
					{
						name: '商家售后已收到',
						time: '2023-06-12 09:01:49',
						isNow: 0,
						type: 1,
						desc: '您的服务单商品已收到'
					},
					{
						name: '返修换新订单生产',
						time: '2023-06-12 13:19:49',
						isNow: 0,
						type: 1,
						desc: '您的服务订单已生成新的订单'
					},
					{
						name: '返修换新完成',
						time: '2023-06-13 12:12:49',
						isNow: 0,
						type: 1,
						desc: '您的服务单已完成，如有疑问请反馈，谢谢~，欢迎再次光临'
					},
				]
			}
		}
	}
</script>

<style>
	.main {
		width: 750rpx;
		height: 1370rpx;
		background-color: rgb(255, 255, 255);
		position: fixed;
		top: 90rpx;

	}

	.info-title {
		color: #A1A1A1;
		font-size: 26rpx;
	}

	.info-value {
		color: #3B3B3B;
		font-size: 26rpx;
	}
</style>